<template>
  <div>
    <div><h3>产品列表</h3></div>
    <div>
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%">

        <el-table-column
          prop="productId"
          label="productID"
          width="180">
        </el-table-column>

        <el-table-column
          prop="productName"
          label="产品名称"
          width="180">
        </el-table-column>

        <el-table-column
          prop="typeId"
          label="产品类型"
          :formatter="formatteruserId">
        </el-table-column>

        <el-table-column
          prop="productRate"
          label="贷款利率"
          width="180">
        </el-table-column>

        <el-table-column
          prop="productCompany"
          label="贷款公司"
          width="180">
        </el-table-column>

        <el-table-column
          prop="productPrice"
          label="产品价格">
        </el-table-column>

        <el-table-column
          prop="status"
          label="产品状态">
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-button type="text" @click="openAdd">添加</el-button>
    <el-button type="text" @click="openA1dd">283782</el-button>

    <el-dialog title="添加表单" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="form.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" :label-width="formLabelWidth">
          <el-select v-model="form.typeId" placeholder="请选择">
            <el-option
              v-for="item in productTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品价格" :label-width="formLabelWidth">
          <el-input v-model="form.productPrice" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Padd">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {ProductList,add,typelist} from "@/api/product/product";
import {deleteById} from "../../../api/product/product";

export default {

  data () {
    return {
      pageNum: 1,
      pageSize: 2,
      total: 0,
      tableData: [],
      dialogFormVisible: false,
      form: {
        productName: '',
        typeId: '',
        productPrice:'',
      },
      formLabelWidth: '120px',
      productTypeList:[],
    }
  },
  created () {
    this.getList();
  },
  methods: {
    openA1dd(){
      this.$router.push("/product/add")
    },
    handleDelete(index,row){
      deleteById(row.productId).then(res=>{
        console.log("deleteById",res);

        this.getList();
      })
    },
    Padd(){
      this.dialogFormVisible = false
      add(this.form).then(res => {
        console.log("ProductList",res);
        if(res.code==200){
          this.form = {}
          this.getList()
        }
      })
    },
    openAdd(){
      this.dialogFormVisible = true
      this.form ={}

      typelist({}).then(res => {
        this.productTypeList = res.data
      })

    },
    //获取列表
    getList(){
      let param = {};
      param.pageNum = this.pageNum;
      param.pageSize = this.pageSize;



      //调用后台方法
      ProductList(param).then(res => {
        console.log("ProductList",res);
           this.tableData=res.data.records;
           this.total=res.data.total;
      })
    },

    formatteruserId(row,index){
      if(row.typeId==1)return"校园贷";
      if(row.typeId==2)return"网贷";
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.getList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum=val;
      this.getList();
    },
  },
}
</script>

<style scoped>

</style>
